![複数のQRコードを連続して読み取れる LIFF アプリを作ってみた](https://devio2023-media.developers.io/wp-content/uploads/2019/07/line-eyecatch.jpg)
複数のQRコードを連続して読み取れる LIFF アプリを作ってみた
こんにちは!LINE事業部のたにもんです!
先日、以下の記事でQRコードを読み取る LIFF アプリを作成しました。
この記事で紹介した LIFF アプリでは、QRコードを1つ読み取ると「コードリーダー」が閉じてしまい、複数のQRコードを読み取りたい場合に不便でした。
そこで、複数のQRコードを効率的に読み取れる LIFF アプリを作成しました! 実際に動かした様子は次のとおりです。
以下の4つのQRコードを連続して読み取れていることが分かるかと思います!
https://www.google.com/
https://www.amazon.co.jp/
https://www.facebook.com/
https://www.apple.com/
今回開発したソースコードはこちらのリポジトリで公開しているので、実装が気になる方は参考にしてください!
環境
- node: 16.14.0
- npm: 8.3.1
- AWS CDK: 2.12.0 (build c9786db)
- iOS: 15.2.1
- LINE: 12.1.0
全体像
今回は以下のような QRCodeScanner
コンポーネントを作成することで、複数のQRコードを連続で読み取れるようにしました。
このコンポーネントでどのようにQRコードを読み取っているのかを説明していきます。
// app/src/components/QRCodeScanner.tsx import React, { useEffect, useRef, useState } from 'react'; import jsQR from 'jsqr'; const videoWidth: number = 500; const videoHeight: number = 500; const videoFrameRate: number = 5; const constraints: MediaStreamConstraints = { audio: false, video: { width: videoWidth, height: videoHeight, frameRate: { max: videoFrameRate, }, facingMode: { exact: 'environment', }, }, }; const QRCodeScanner: React.VFC = () => { const videoRef = useRef<HTMLVideoElement>(null); const intervalRef = useRef<number>(); const canvasRef = useRef<HTMLCanvasElement>(null); const [isContinue, setIsContinue] = useState(false); const [qrCodeData, setQrCodeData] = useState<string[]>([]); useEffect(() => { const openCamera = async () => { const video = videoRef.current; if (video) { const stream = await navigator.mediaDevices.getUserMedia(constraints); video.srcObject = stream; } }; openCamera(); }, []); useEffect(() => { if (!isContinue) { return; } const decodeQRCode = () => { const context = canvasRef?.current?.getContext('2d'); const video = videoRef?.current; if (!context || !video) { return; } context.drawImage(video, 0, 0, videoWidth, videoHeight); const imageData = context.getImageData(0, 0, videoWidth, videoHeight); const code = jsQR(imageData.data, videoWidth, videoHeight); return code?.data; }; const intervalId = window.setInterval(() => { const decodedValue = decodeQRCode(); if (!decodedValue || qrCodeData.includes(decodedValue)) { return; } setQrCodeData([...qrCodeData, decodedValue]); }, 1_000 / videoFrameRate); intervalRef.current = intervalId; return () => { clearInterval(intervalRef.current); }; }, [isContinue, qrCodeData]); const handleStart = () => { setIsContinue(true); }; const handleStop = () => { setIsContinue(false); }; return ( <div> <p>QR Code Scanner</p> <div style={{ display: 'grid' }}> <div> <video autoPlay playsInline={true} ref={videoRef} style={{ width: '100%' }} > <canvas width={videoWidth} height={videoHeight} ref={canvasRef} /> </video> </div> <div> <p>{qrCodeData.join('\n')}</p> </div> <div> <button onClick={handleStart}>Start Scan</button> <button onClick={handleStop}>Stop Scan</button> </div> </div> </div> ); }; export default QRCodeScanner;
カメラの起動
以下の部分では getUserMedia
メソッドを用いてカメラを起動します。
この処理は useEffect
の依存リストに空配列を指定することで、コンポーネントの初回レンダリング時のみ実行されるようにしています。
useEffect(() => { const openCamera = async () => { const video = videoRef.current; if (video) { const stream = await navigator.mediaDevices.getUserMedia(constraints); video.srcObject = stream; } }; openCamera(); }, []);
QRコードの読み取りループ
以下の部分では、setInterval
メソッドを用いて一定時間ごと(今回は200ミリ秒ごと)にQRコードの読み取りを行い、qrCodeData
配列を更新しています。
QRコードの読み取りには、後述する decodeQRCode
関数を利用しています。
なお、QRコードを読み取るか否かを isContinue
変数で制御しています。
useEffect(() => { if (!isContinue) { return; } const decodeQRCode = () => { /* 略 */ }; const intervalId = window.setInterval(() => { const decodedValue = decodeQRCode(); if (!decodedValue || qrCodeData.includes(decodedValue)) { return; } setQrCodeData([...qrCodeData, decodedValue]); }, 1_000 / videoFrameRate); intervalRef.current = intervalId; return () => { clearInterval(intervalRef.current); }; }, [isContinue, qrCodeData]);
decodeQRCode
関数
前回の記事 では、LIFF SDK v2 で提供されている scanCodeV2
メソッドを利用してQRコードを読み取りました。
この scanCodeV2
メソッドの仕様により、QRコードを1つ読み取るとコードリーダーが閉じてしまっていたので、今回は jsQR というライブラリを利用してQRコード読み取り処理を自前で書きました。
ちなみに、jsQR は scanCodeV2
メソッドの内部でも利用されています(2022年2月22日現在)。
const decodeQRCode = () => { const context = canvasRef?.current?.getContext('2d'); const video = videoRef?.current; if (!context || !video) { return; } context.drawImage(video, 0, 0, videoWidth, videoHeight); const imageData = context.getImageData(0, 0, videoWidth, videoHeight); const code = jsQR(imageData.data, videoWidth, videoHeight); return code?.data; };
QRコード読み取りの開始・終了
isContinue
変数に true
/ false
を設定する関数をそれぞれ作成し、これらを Start Scan
/ Stop Scan
というボタンの Click
イベントハンドラとして登録することで、QRコード読み取りの開始・終了を制御しています。
const handleStart = () => { setIsContinue(true); }; const handleStop = () => { setIsContinue(false); };
参考
QRコードは株式会社デンソーウェーブの登録商標です。